<template>
	<view class="drug-search-page">
		<!-- 标题 -->
		<view class="page-header">
			<text class="header-title">药品查询</text>
		</view>

		<!-- 搜索框 -->
		<view class="search-bar">
			<image src="/static/sousuo.png" class="list-icon"></image>
			<input placeholder="输入药名/条码/公司搜索药品" radius="100" @confirm="searchDrug" bgColor="#f5f5f5" />
		</view>

		<!-- 药品列表 -->
		<scroll-view class="drug-list" scroll-y>
			<view class="drug-item" v-for="(drug, index) in drugList" :key="index">
				<view class="drug-name">
					<text>{{drug.name}}</text>
					<text class="drug-type">{{drug.type}}</text>
				</view>

				<view class="drug-spec">
					<text>规格：{{drug.spec}}</text>
				</view>

				<view class="drug-info">
					<text>药品编号：{{drug.code}}</text>
				</view>

				<view class="drug-company">
					<text>制药公司：{{drug.pro_unit}}</text>
				</view>

				<view class="divider" v-if="index < drugList.length - 1"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,onMounted
	} from 'vue'
	const drugList = ref([])
	const getDrugList = () => {
		uni.request({
			url: 'http://localhost:3010/search/drugs/list?page=1&pagenum=10',
			method: 'GET',
			header: {
				Authorization: `Bearer ${uni.getStorageSync("token")}`,
			},
			success: (res) => {
				if(res.data.code===200){
					drugList.value=res.data.data.result || []
				}
			}
		})
	}
	const searchKeyword = ref('')  
	// 模糊搜索
	const searchDrug=((e)=>{
		 // 获取输入框内容，e.detail.value 是输入框确认时的内容
		  searchKeyword.value = e.detail.value  
		  uni.request({
		    url: 'http://localhost:3010/search/drugs',
		    method: 'POST',
		    header: {
		      Authorization: `Bearer ${uni.getStorageSync("token")}`,
		      "Content-Type": "application/x-www-form-urlencoded"
		    },
		    // 根据接口文档，参数名是 name1、page、pagenum，这里 page 固定为 1，pagenum 固定为 10，name1 为搜索关键词
		    data: {  
		      name1: searchKeyword.value,
		      page: '1',
		      pagenum: '10'
		    },
		    success: (res) => {
		      if (res.data.code === 200) {
		        // 假设接口返回数据结构中，药品列表在 data.result 里，根据实际调整
		        drugList.value = res.data.data.result || []  
		      } else {
		        uni.showToast({
		          title: '搜索失败',
		          icon: 'none'
		        })
		      }
		    },
		    fail: (err) => {
		      console.error('搜索请求失败：', err);
		      uni.showToast({
		        title: '网络错误，搜索失败',
		        icon: 'none'
		      });
		    }
		  })
	})
	onMounted(()=>{
		getDrugList()
		searchDrug()
	})
</script>

<style lang="scss">
	.drug-search-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
		padding: 0 20rpx;
		box-sizing: border-box;
		width: 100vw;
	}

	.page-header {
		padding: 30rpx 0;
		text-align: center;

		.header-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.search-bar {
		padding: 20rpx 0;
		display: flex;
		width: 700rpx;
		height: 60rpx;
		border: 4rpx solid lawngreen;
		padding-left: 20rpx;
		margin-bottom: 25rpx;
	}

	.search-bar input {
		width: 400rpx;
		margin-left: 25rpx;
	}

	.search-bar image {
		width: 50rpx;
		height: 50rpx;
	}

	.drug-list {
		width: 95%;
		// flex: 1;
		border-radius: 12rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.drug-item {
		padding: 20rpx;
		position: relative;
		background-color: #fff;
		border-left: 8rpx solid #47dc40;
		margin-top: 25rpx;
		height: 175rpx;
		border-radius: 20rpx;

		.drug-name {
			display: flex;
			align-items: center;
			// margin-bottom: 10rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.drug-type {
				font-size: 24rpx;
				color: #666;
				margin-left: 15rpx;
			}
		}

		.drug-spec,
		.drug-info,
		.drug-company {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}

		.drug-company {
			margin-top: 10rpx;
			color: #888;
		}
	}

	.divider {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 1rpx;
		background-color: #eee;
	}
</style>